jQuery(function ($) {
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    let htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize = width/100+'px';
    window.host = "http://114.116.69.140:8086";
    function send_ajax(method, url, data, callback) {
        var user = JSON.parse(localStorage.getItem('user_info')) || {};
        if(user){
        var token = user.token;  
        }
        
        $.ajax({
            type: method, //提交方法是POST
            url: host + url,
            data: (method == 'post'||method == 'POST') ? JSON.stringify(data) : data,
            contentType: "application/json",
            xhrFields: {
                withCredentials: true
            },
            beforeSend: function beforeSend(request) {
                request.setRequestHeader("X-AUTH-TOKEN", token);
            },
            error: function error(_error) {
                //请求失败的回调方法 
                // alert('网络加载失败，请稍候再试!');
            },
            success: function success(data) {
                if (data.code == 200) {
                    if (callback) {
                        callback(data);
                    }
                } else {
                    // if (data.msg == '商品不存在') {
                    //     window.location.href = "/";
                    // } else {
                    //     // alert(data.msg);
                    // }
                }
            }
        });
    };
    send_ajax('post', '/api/screen/data', '', function callback(result) { 
        if(result.code==200&&result.data){
            var chartData = result.data;
            var rankName=[];
            var rankCount = [];
            var supplyList = chartData.goodsCountList;//供应产品发布量
            var purList =chartData.requestCountList;//采购产品发布量
            var readList = chartData.readCountList;//每日文章阅读量
            var sourceCountList =  chartData.sourceCountList;//追溯统计量
            var rankingCat = chartData.catList;//供应分类销量排名
            for(var k = 0;k<rankingCat.length;k++){
                var a_rankName = rankingCat[k].name;
                var a_rankCount = rankingCat[k].count;
                rankName.push(a_rankName);
                rankCount.push(a_rankCount);
            }
            var dateArr=chartData.dateList;//日期
             $('.trade_num').html('￥'+chartData.totalAmt);//交易额
             $('.register_num').html(chartData.totalUser);//注册用户
            var articleList = chartData.articleList;//文章列表
            var articleHtml='';
            for(var i = 0;i<articleList.length;i++){
                    var a_article = articleList[i];
                     articleHtml+=' <li>\
                    <span class="index index'+(parseFloat(i)+1)+'">'+(parseFloat(i)+1)+'</span>\
                    <a href="/article-'+a_article.id+'.html" target="_blank"><span class="article_title">'+a_article.title+'</span></a>\
                    <span class="reading_num">'+a_article.clicks+'</span>\
                </li>'
               
            };


            var mapData = chartData.aristList;//地图的列表
            var mapObject={};
            for(var n = 0;n<mapData.length;n++){
                var a_mapData = mapData[n]
                mapObject[a_mapData.name]=[a_mapData.longitude,a_mapData.latitude]
            }
            $('.read_list').append(articleHtml);//文章阅读量排名
            var myChart = echarts.init(document.getElementById('supply_msg'));//供应产品发布量
            myChart.setOption({
                xAxis: {
                    type: 'category',
                    scale: true,
                    boundaryGap: false,
                    axisLine: {
                    lineStyle: {
                        color: '#435A6B'
                    }
                },
                    axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#A6CDFF'
                                }
                            },
                    data: dateArr
                },
                yAxis: {
                    type: 'value',
                    scale: true,
                    splitLine:{
                        show: true,
                        lineStyle:{
                            color: ['#435A6B'],
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#A6CDFF'
                        }
                    },
                },
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '10%',
                    containLabel: true
                },
                series: [{
                    data:supplyList,
                    type: 'line',   
                    symbol: 'circle',
                    symbolSize: 10,            
                    itemStyle: {
                        borderColor: '#333',
                        border: '#fff',
                        color: '#27CDFF',
                        border: '#fff',
                        normal: {
                            color: '#27CDFF',
                            label: {
                                show: true, 
                                position: 'top', 
                                backgroundColor: '#27CDFF',
                                borderColor: '#aaa',
                                borderWidth: 1,
                                color: '#fff',
                                borderRadius: 10,
                                padding:[1,8]

                            }
                           
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: 'linear-gradient(175deg,rgba(39,205,255,0.51) 0%,rgba(39,205,255,0) 100%)' ,//改变区域颜色
                            opacity:.3
                        }
                    },
                    smooth: true
                }]
            })
            var myChart_pur = echarts.init(document.getElementById('purchase_msg'));//采购产品发布量
            myChart_pur.setOption({
                xAxis: {
                    type: 'category',
                    scale: true,
                    boundaryGap: false,
                    axisLine: {
                    lineStyle: {
                        color: '#435A6B'
                    }
                },
                    axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#A6CDFF'
                                }
                            },
                    data:dateArr
                },
                
                yAxis: {
                    type: 'value',
                    scale: true,
                    splitLine:{
                        show: true,
                        lineStyle:{
                            color: ['#435A6B'],
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#A6CDFF'
                        }
                    },
                },
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '8%',
                    containLabel: true
                },
                series: [{
                    data: purList,
                    type: 'line',   
                    symbol: 'circle',
                    symbolSize: 10,  
                    itemStyle: {
                        normal: {
                            color: '#27CDFF',
                            borderWidth: 3,
                            borderColor: '#202B33',
                            color: '#569C64',
                            label: {
                                show: true, 
                                position: 'top', 
                                backgroundColor: '#569C64',
                                borderColor: '#aaa',
                                borderWidth: 1,
                                color: '#fff',
                                borderRadius: 10,
                                padding:[1,8]

                            }
                           
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: '#569C64', //改变区域颜色
                            opacity:.2
                        } 
                    },
                    smooth: true
                }]
            })
            var myChart_read = echarts.init(document.getElementById('read_msg'));//每日文章阅读量
            myChart_read.setOption({
                xAxis: {
                    type: 'category',
                    scale: true,
                    boundaryGap: false,
                    axisLine: {
                    lineStyle: {
                        color: '#435A6B'
                    }
                },
                    axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#A6CDFF'
                                }
                            },
                    data: dateArr
                },
                yAxis: {
                    type: 'value',
                    scale: true,
                    splitLine:{
                        show: true,
                        lineStyle:{
                            color: ['#435A6B'],
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#A6CDFF'
                        }
                    },
                },
                grid: {
                    left: '3%',
                    right: '10%',
                    // bottom: '10%',
                    containLabel: true
                },
                series: [{
                    data: readList,
                    type: 'line',   
                    symbol: 'circle',
                    symbolSize: 10,  
                itemStyle: {
                    normal: {
                        borderWidth: 3,
                        borderColor: '#202B33',
                        color: '#2496A1',
                        label: {
                            show: true, 
                            position: 'top', 
                            backgroundColor: '#2496A1',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            color: '#fff',
                            borderRadius: 10,
                            padding:[1,8]

                        }
                       
                    }
                },
                    areaStyle: {
                        normal: {
                            color: '#2496A1', //改变区域颜色
                            opacity:.3
                        } 
                    },
                    smooth: true
                }]
            })
            var myChart_ranking = echarts.init(document.getElementById('ranking_msg'));//供应分类销量排名
            myChart_ranking.setOption({
                color: ['#3398DB'],
                // tooltip: {
                //     trigger: 'axis',
                //     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                //         type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                //     }
                // },
                xAxis:
                    {
                        type: 'value',
                        axisTick: {
                            alignWithLabel: true
                        },
                        boundaryGap: false,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#A6CDFF'
                            }
                        },
                        splitLine:{
                            show: true,
                            lineStyle:{
                                color: ['#435A6B'],
                                width: 1,
                                type: 'solid'
                            }
                        }
                    }
                ,
                yAxis: {
                        type: 'category',
                        data: rankName,
                        axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#A6CDFF'
                                }
                            },
                        },
                    axisLine: {
                            lineStyle: {
                            color: '#435A6B'
                        }
                    
                },
                series: [
                        {
                            name: '直接访问',
                            type: 'bar',
                            barWidth: '60%',
                            data:rankCount,
                            itemStyle:{
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#5BD6FF'
                                }, {
                                    offset: 1,
                                    color: '#3174FF'
                                }]),
                            }
                            },
                            symbol: 'emptydiamond',

                            barGap: '100%'
                            
                        }
                        
                ]
            
            })
            var myChart_trace = echarts.init(document.getElementById('trace_msg'));//追溯统计量
            myChart_trace.setOption({
                xAxis: {
                    type: 'category',
                    data:dateArr,
                    axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#A6CDFF'
                            }
                    }
                        
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#A6CDFF'
                                }
                    },
                },
                series: [{
                    data:sourceCountList,
                    type: 'line',
                    itemStyle:{
                        normal:{
                            color:'#fc8a0f', //折点颜色
                            lineStyle:{
                                color:'#ff9c35' //折线颜色
                                    }
                            }
                    }
                }]
            })
            var chart_map = echarts.init(document.getElementById('map'));
            var geoCoordMap = mapObject;//地图数据
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };
            $.getJSON('/static/js/lankao.json', function (chinaJson) {
                    echarts.registerMap('lankao', chinaJson);
                    chart_map.setOption({
                        tooltip: {
                            trigger: 'item',
                                formatter: function (params) {
                                    return params.name;
                                },
                                // extraCssText:"height:20px;"
                        },
                        legend: {
                            orient: 'vertical',
                            top: 'bottom',
                            left: 'right',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        geo: {
                            map: 'lankao',
                            silent: true,
                            itemStyle: {
                                // areaColor: '#007dc9',
                                areaColor: 'transparent',
                                // borderColor: '#111',
                                borderColor: 'transparent'

                            }
                            ,
                            emphasis: {
                                itemStyle: {
                                    // areaColor: '#2a333d'
                                },
                                label: {
                                    show: false
                                }
                            }
                        },
                        series: [
                            {
                                // name: '兰考',
                                type: 'scatter',
                                coordinateSystem: 'geo',
                                data: convertData(mapData),
                                symbolSize: 20,
                                itemStyle: {
                                    normal:{
                                        // color: '#C6AD13',
                                        color: '#007dc9',
                                        show:true,
                                        // shadowBlur: 10,
                                        fontSize:'18',
                                        shadowColor: '#258CF9',
                                            label:{
                                                show:true,
                                                distance: 50, 
                                                position: [30, 30],
                                                formatter: function(data) {
                                                    var a =  data.name ;
                                                    return a;
                                                },
                                                textStyle: {
                                                    fontSize : 15,
                                                    shadowBlur: 10,
                                                    // color:'#C6AD13',
                                                    shadowColor: '#258CF9'
                                                }
                                            }
                                        },
                                    emphasis: {
                                        show:true,
                                        borderColor: '#fff',
                                        borderWidth: 1
                                    }
                                }
                            },

                        ],
                    });
            }); 
        }
    });
});